<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请填写名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="文件名" prop="fileName">
        <el-input
            v-model="form.fileName"
            placeholder="请填写文件名"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <codemirror
            v-model="form.content"
            placeholder="请填写内容"
            :autofocus="true"
            :indent-with-tab="true"
            :tab-size="2"
            :extensions="extensions"
            :style="{ width: '100%', height: '500px' }"
        />
      </el-form-item>
      <el-form-item label="是否内置" prop="buildInFlag">
        <el-switch v-model="form.buildInFlag" active-color="#13ce66"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
            size="small"
            v-model="form.remark"
            placeholder="请填写备注"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            show-word-limit
            maxlength="99"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="saveEdit">保存</el-button>
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  i18nMsgDetailApi,
  i18nMsgEditApi,
  i18nMsgSaveApi,
} from "../../../api/mgt/system/i18nMsg";
import { createObjectBase, deepCopy } from "@/utils";

import { oneDark } from '@codemirror/theme-one-dark';
import { highlightSpecialChars } from '@codemirror/view';
import { tags as t } from '@lezer/highlight';
import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';

const obj = {
  id: "",
  name: "",
  fileName: "",
  content: "",
  buildInFlag: false,
  remark: ""
};

const customHighlightStyle = HighlightStyle.define([
  { tag: t.keyword, color: 'blue' },
  { tag: t.string, color: 'green' },
  { tag: t.comment, color: 'gray' },
  { tag: t.variableName, color: 'purple' },
  { tag: t.function(t.variableName), color: 'orange' },
]);

const customHighlighting = syntaxHighlighting(customHighlightStyle);

export default {
  data() {
    const checkFileName = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9_.]+$/;
      if (!value) {
        return callback(new Error("文件名为空"));
      } else {
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请填写正确的文件格式（只允许字母、数字、下划线、点）"));
        }
      }
    };
    return {
      extensions: [
        oneDark,
        highlightSpecialChars(),
        customHighlighting,
      ],
      form: deepCopy(obj),
      rules: {
        name: [
          { required: true, message: "请填写名称", trigger: "change" },
          { max: 50, message: "长度不能超过50个字符", trigger: "change" },
        ],
        fileName: [
          { required: true, validator: checkFileName, trigger: "change" },
          { max: 50, message: "长度不能超过50个字符", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写内容", trigger: "change" },
        ],
        remark: [
          { max: 99, message: "长度不能超过99个字符", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
        }
      } else {
        i18nMsgDetailApi({ id }).then((res) => {
          const data = deepCopy(res?.bizData);
          this.form = data;
        });
      }
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          const { id } = data;
          const fn = id ? i18nMsgEditApi : i18nMsgSaveApi;
          fn(data).then((res) => {
            this.goBack();
          });
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/i18nMsg/page",
      });
    },
  },
  created() {
    const { id } = this.$route.query;
    this.getDetail(id);
  },
};
</script>

<style scoped>
.cm-keyword {
  color: blue;
}

.cm-string {
  color: green;
}

.cm-comment {
  color: gray;
}
</style>
